<template>
  <UniPopup
    ref="uniPopupRef"
    :isMaskClick="true"
    :zIndex="999"
    border-radius="32rpx"
    background-color="#FFF"
    @maskClick="emits('maskClick')"
  >
    <view class="modal-container">
      <view class="mb-12">
        <TImage
          :src="userInfo?.avatar"
          errorImgType="person"
          width="160rpx"
          height="160rpx"
          borderRadius="50%"
        ></TImage>
      </view>
      <view class="name disFlxAC">
        <text class="mr-8">{{ userInfo?.name }}</text>
        <view v-if="SexEnum.FEMALE === userInfo?.sex" class="sex">
          <text class="ali-icon icon-nvxing" style="color: #ea5e0e"></text>
          <text class="text">女性</text>
        </view>
        <view v-if="SexEnum.MALE === userInfo?.sex" class="sex">
          <text class="ali-icon icon-nvxing" style="color: #2878ff"></text>
          <text class="text">男性</text>
        </view>
      </view>

      <view class="company-info disFlxAC">
        <text class="ov-1">{{ userInfo?.companyName }}</text>
        <text class="ov-1">{{ userInfo?.companyPositionName }}</text>
      </view>

      <view class="school">
        <view class="tag py-4 px-12" style="background-color: #fff4e7; color: #e29942">
          <text class="ov-1">
            <template v-if="userInfo?.schoolName">{{ userInfo?.schoolName }}</template>
            <template v-else>学校：未知</template>
          </text>
        </view>
        <view class="tag py-4 px-12">
          <text class="ov-1">家乡：{{ userInfo?.nativePlaceStr || '未知' }}</text>
        </view>
      </view>

      <view class="resource">
        <view class="title">可提供资源</view>
        <view class="desc">{{ userInfo?.resource || '对方暂未填写' }}</view>
      </view>

      <view class="demand">
        <view class="title">需求资源</view>
        <view class="desc">{{ userInfo?.demand || '对方暂未填写' }}</view>
      </view>
    </view>
  </UniPopup>
</template>
<script setup lang="ts">
  import type { RegisterIdAppUserInfo } from '@/api/activity/types';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { ref } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { SexEnum } from '@/enums/loginEnum';

  const uniPopupRef = ref<UniPopupRef | null>(null);

  const userInfo = ref<RegisterIdAppUserInfo>();

  const emits = defineEmits(['maskClick']);

  defineExpose({
    open(data: RegisterIdAppUserInfo) {
      uniPopupRef.value?.open();
      userInfo.value = data;
    },
  });
</script>
<style lang="scss" scoped>
  .modal-container {
    box-sizing: border-box;
    width: 640rpx;
    max-height: 1000rpx;
    padding: 48rpx 32rpx 32rpx 32rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    .name {
      color: #333;
      font-size: 36rpx;
      font-weight: 700;
      line-height: 56rpx;
      margin-bottom: 24rpx;
    }
    .sex {
      display: flex;
      align-items: center;
      gap: 8rpx;

      .ali-icon {
        font-size: 32rpx;
      }
      .text {
        color: #646566;
        font-size: 28rpx;
        line-height: 40rpx;
      }
    }
    .company-info {
      display: flex;
      align-items: center;
      gap: 32rpx;
      color: #333;
      font-size: 24rpx;
      font-weight: 700;
      line-height: 32rpx;
      margin-bottom: 24rpx;
    }
    .school {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24rpx;
      .tag {
        border-radius: 24rpx;
        background: #d0f7ff;
        color: #2878ff;
        font-size: 24rpx;
      }
      margin-bottom: 48rpx;
    }
    .resource {
      margin-bottom: 48rpx;
    }
    .resource,
    .demand {
      box-sizing: border-box;
      width: 100%;
      padding: 32rpx;
      background: #f7f8fa;
      border-radius: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24rpx;
      .title {
        color: #333;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 48rpx;
      }
      .desc {
        color: #646566;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 36rpx;
      }
    }
  }
</style>
